import React from 'react';
import classNames from 'classnames';

export interface ITabItemProps {
  /**
   * Tab value
   */
  value: string;
  /**
   * 激活
   */
  active?: boolean;
  disabled?: boolean;
  onChange?: (value: string) => void;
  className?: string;
  style?: React.CSSProperties;
}

export class Tab extends React.Component<ITabItemProps, {}> {
  constructor(props: ITabItemProps) {
    super(props);
    this.onToggle = this.onToggle.bind(this);
  }

  public onToggle() {
    if (!this.props.disabled && this.props.onChange) {
      this.props.onChange(this.props.value);
    }
  }

  public render() {
    const { className, style } = this.props;
    const disabledClassName = {
      'tab-item--disabled': this.props.disabled,
    };
    return (
      <span
        className={classNames('tab-item', disabledClassName,
          this.props.active ? 'active' : '', className)}
        style={style}
        onClick={this.onToggle}>
        {this.props.children}
      </span>);
  }
}

/**
 * <Tab value="tab1" active={false}>按钮</Tab>
 */
